<template>
    <div class="home-container">
      <!-- 头部 -->
      <van-nav-bar class="app-nav-bar">
          <van-button class="search-btn" @touchstart="$router.push({path:'/search'})" icon="search" type="info" round slot="title" >搜索</van-button>
      </van-nav-bar>
      <!-- 头部 -->
      <!-- tab区域 -->
      
        <van-tabs v-model="active" class="tabs">
          <van-tab  v-for="(channel,index) in channelsList" :key="index" :title="channel.name">
            <!-- 文章列表区域 -->
              <article-list :channel="channel" />
            <!-- 文章列表区域 -->
          </van-tab>
          <div slot="nav-right" class="wap-nav-placeholder"></div>
          <div slot="nav-right" class="wap-nav-wrap" @click ="isChannelEditShow = true">
            <van-icon size="30" name="wap-nav" />
          </div>
        </van-tabs>
      
      <!-- tab区域 -->

      <!-- 频道弹出层 -->
      <van-popup 
        closeable 
        class="channel-edit-popup" 
        v-model="isChannelEditShow" 
        close-icon-position="top-left"
        get-container="body"
        style="height:100%"
        position="bottom"  >
        <!-- 频道编辑组件 -->
        <channel-edit :active="active" @close="closePopup" @update-active='updateActive' :userChannelList="channelsList"></channel-edit>
        </van-popup>
        
    </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from '@/views/home/components/articleList'
import ChannelEdit from '@/views/home/components/channelEdit'
export default {
    name: 'HomeIndex',
    components:{
      ArticleList,
      ChannelEdit
    },
    data() {
        return {
            active: 0,
            channelsList: [],
            isChannelEditShow: false ,//控制频道编辑的显示状态
            
        };
    },

    mounted() {
      this.loadUserChannels()
    },
    methods: {
      async loadUserChannels (){
        const { data } = await getUserChannels()
        this.channelsList = data.data.channels
      },
      closePopup (index) {
        this.isChannelEditShow = false
        this.active = index
      },
      //更新active
      updateActive (active){
        this.active = active
      },
      getContainer () {
        return document.querySelector('.home-container')
      },
      
    },
};
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
  .van-nav-bar{
    z-index: unset;
     /deep/.van-nav-bar__title{
      max-width: unset;
      .search-btn{
        width:277px ;
        height: 32px;
        background-color: #5babfb;
      .van-icon{
          color: #fff;
          font-size: 16px;
      }
      .van-button__text{
          font-size: 14px;
      }
  }
  }
  }
  .tabs{
    /deep/.van-tabs__line {
      background-color: #3296fa;
      width: 20px;
       .van-tab:last-child{
        margin-right: 33px;
     }
    }
  }
  .wap-nav-placeholder{
    width: 33px;
    flex-shrink: 0;
  }
  .wap-nav-wrap{
    position: fixed;
    right: 0;
    height: 44px;
    line-height: 44px;
    width: 33px;
    background-color: #fff;
    opacity: .9;
    text-align: center;
    .van-icon{
      font-size: 24px;
    }
  }
}

</style>